<template>
  <!--音频驱动轴-->
  <line-item ref="lineItemRef" class="audio-drive-line" :timeline-item="timelineItem">
    <template v-for="(item, index) in sliderArr" :slot="index">
      <div v-if="sliderArr.length" class="audio-drive-content columns">
        <div v-if="renderType === 'wavesurfer'" id="audio-drive" ref="canvasRef"></div>
        <canvas v-else id="audio-drive" ref="canvasRef"></canvas>
      </div>
      <div v-else class="audio-drive-content show-padding text">{{ item.name }}</div>
    </template>
  </line-item>
</template>

<script>
import multiMixins1 from '@veditor/components/timeLine/js/multiTrackNew';
export default {
  name: 'AudioDrive',
  mixins: [multiMixins1],
};
</script>

<style lang="stylus">
.audio-drive-line
  .line-item
    background-color #22574c
    color #00866c
    .audio-drive-content
      height 100%
      #audio-drive
        width 100%
        height 100%
        min-width 4px
    .columns
      display flex
      padding 0 4px
      align-items flex-end
      .content-item
        flex 1
        width 2px
        margin-left 1px
        background linear-gradient(to top, #22785f 0, #22785f 18px, #AB973C 18px, #ab973c 30px, #b64b43 30px, #b64b43 38px)
        min-height 2px
        &:last-child
          margin-left unset
</style>
